<template>
    <div class="index_suzhou">
        <div class="index_map">
            <div class="first">
                <suzhou-map></suzhou-map>   
            </div>
            <div class="second">
                <div class="index_map_right">
                    <div class="item">
                        <div class="title">
                            <span>累计确诊&nbsp;</span>
                            <i class="iconfont icon-wenti"></i>
                        </div>
                        <h2 class="num">87</h2>
                        <div class="text">
                            <span>周同比</span>
                            <span class="week">0% &nbsp;</span>
                            <i class="iconfont icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi"></i>
                                
                            <span class="day">日环比</span>
                            <span >0% &nbsp;&nbsp;</span>
                            <i class="iconfont icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi-copy"></i>
                        </div>
                        <div class="border"></div>
                        <div class="yes_add">
                            <span>昨日新增&nbsp;&nbsp;</span>
                            <span>0</span>   
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">
                            <span>现有确诊&nbsp;&nbsp;</span>
                            <i class="iconfont icon-wenti"></i>
                        </div>
                        <h2 class="num">0</h2>
                        <div class="ploy">
                            <img src="../../assets/img/11.png" alt="">
                        </div>
                        <div class="border"></div>
                        <div class="yes_add">
                            <span>昨日新增&nbsp;&nbsp;</span>
                            <span >0</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">
                            <span >累计死亡&nbsp;&nbsp;</span>
                            <i class="iconfont icon-wenti"></i>
                        </div>  
                        <h2 class="num">0</h2>
                        <div class="bar">
                            <img src="../../assets/img/22.png" alt="">
                        </div>
                        <div class="border"></div>
                        <div class="yes_add">
                            <span>昨日新增&nbsp;&nbsp;</span>
                            <span>0</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">
                            <span>治愈率</span>
                        </div>
                            
                        <h2 class="num">100%</h2>
                        <div class="progress">
                            <img   src="../../assets/img/55.png" alt="">
                        </div>
                        <div class="border"></div>
                        <div class="text">
                            <span>周同比</span>
                            <span class="week">0% &nbsp;</span>
                            <i class="iconfont icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi"></i>
                            <span class="day">日环比</span>
                            <span >0% &nbsp;</span>
                            <i class="iconfont icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi-copy"></i>
                        </div>
                    </div>
                    </div>
            </div>
        </div>
        <div class="index_data">
            <div class="index_search">
                <el-row :gutter="20" type="flex" justify="center">
                    <el-col :span="10">
                        <el-input v-model="epidemic.keywords" placeholder="输入关键词"  clearable @clear="getEpidemic"></el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" @click="getEpidemic">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="index_filter">
                <div class="search_date">
                    <span>日期筛选</span>
                    <el-date-picker v-model="datetimerange" type="daterange" 
                        range-separator="至" 
                        start-placeholder="开始日期" 
                        end-placeholder="结束日期" 
                        value-format="yyyy-MM-dd"
                        clearable
                        unlink-panels
                        @change="dateSearch">
                    </el-date-picker>
                </div>
                <div class="search_from">
                    <span>来源筛选</span>
                    <el-select v-model="epidemic.source" placeholder="请选择"   clearable   @clear="getEpidemic" @change="getEpidemic"  >
                        <el-option
                             v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>      
            </div>
            <div class="table">
                <el-table ref="table" :data="epidemicData.data" style="width: 100%" fit>
                    <el-table-column  label="标题" min-width="40%">
                        <template slot-scope="scope">
                            <a :href="scope.row.url" target="_blank"> {{scope.row.title}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="username" label="发布人" min-width="10%"></el-table-column>
                    <el-table-column prop="platform_name" label="来源" min-width="10%"></el-table-column>
                    <el-table-column prop="publish_date" label="发布时间" min-width="15%"></el-table-column>
                </el-table>
            </div>
            <div class="page">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="epidemic.pages"
                    layout="total, prev, pager, next, jumper"
                    :total="epidemicData.total">
                </el-pagination>
            </div>
        </div>   
    </div>
  
</template>

<script>
import SuzhouMap from '../Map/SuzhouMap.vue'
export default {
    components:{
        SuzhouMap,
    },
    data(){
        return{
            epidemicData:'',
            datetimerange:'',
            epidemic:{
                keywords:'',//关键字
                pre_time:'',//开始时间
                post_time:'',//结束时间
                source:'',//来源
                hot:'',
                pages:1,//页码
            },
           
            options: [
                {
                    value: 4,
                    label: '微博'
                }, 
                {
                    value: 3,
                    label: '抖音'
                }, 
                {
                    value: 59,
                    label: '寒山闻钟'
                }, 
                {
                    value: 62,
                    label:'澎湃网'
                },
                {
                    value:57,
                    label:'环球新闻'
                },
                {
                    value:60,
                    label:'新京报'
                }
            ],

        }
    },
    created(){
        this.getEpidemic()
    },
    methods:{
        async getEpidemic(){
            const res=await this.$http.get('/data4/4/log',{
                params:this.epidemic
            })
            this.epidemicData=res
            
        },
        handleCurrentChange(newPage){
            this.epidemic.pages=newPage
            this.getEpidemic()
        },
        dateSearch(){
           if(!this.datetimerange){
                this.epidemic.pre_time="",
                this.epidemic.post_time=""
                this.getEpidemic()
            }else{
                this.epidemic.pre_time=this.datetimerange[0]
                this.epidemic.post_time=this.datetimerange[1]
                this.getEpidemic()
            }   
        },
    }

}
</script>

<style lang="less" scoped>
.index_suzhou{
    display: flex;
}
.index_map {
    flex: 1;
    display: flex;
    flex-direction: column;
    .first{
        flex: 1;
        background: linear-gradient(180deg,rgba(36,194,255,0.10), rgba(36,194,255,0.00));
        border: 3px solid #24c2ff;
        margin-right: 20px;
    }
    .second{
        flex: 1;
        margin-top: 15px;
        .index_map_right{
            display: flex;
            flex-wrap: wrap;
            .item{
                width: 440px;
                height: 210px;
                background: linear-gradient(180deg,rgba(36,194,255,0.10), rgba(36,194,255,0.00));
                border: 3px solid #24c2ff;
                padding: 24px 20px;
                .title{
                    color: #24c2ff;
                }
                .num{
                    color: #FFE600;
                    font-size: 30px;
                    margin: 15px 0;
                }
                .text{
                    span{
                        font-size: 14px;
                        color: #24c2ff;
                    }
                    .week{
                        margin: 0 8px;
                    }
                    .day{
                        margin: 0 8px 0 110px;
                    }
                }
                .border{
                    width: 378px;
                    height: 1px;
                    margin: 20px 0 10px 0;
                    background: #04130f;
                }
                .yes_add{
                    color: #24c2ff;
                    font-size: 14px;
                }
                &:first-child{
                    margin:0 15px 15px 0;
                }
                &:nth-child(2){
                    margin-bottom: 15px;
                    .ploy{
                        width: 378px;
                        height: 21px;
    
                        img{
                            width: 100%;
                        }
                    }
                }
                &:nth-child(3){
                    margin-right: 15px;
                    .bar{
                        width: 378px;
                        img{
                            width: 100%;
                        }
                    }
                }
                &:last-child{
                    .progress{
                        width: 378px;
                        height: 25px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
    }
}

.index_data{
    flex: 1;
    background: linear-gradient(180deg,rgba(36,194,255,0.10), rgba(36,194,255,0.00));
    border: 3px solid #24c2ff;
    .index_search{
        margin-top:50px;
    }
    .index_filter{
        display: flex;
        justify-content: space-between;
        padding: 10px;
        margin-top: 30px ;
        span{
            color: #24c2ff;
            margin-right: 10px;
        }
    }
    .table{
        margin-top: 40px;
        padding:0 10px;
    }
}
.icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi{
    font-size: 14px;
    color: #F5222D;
}
.icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi-copy{
    font-size: 14px;
    color: #52C41A;
}
</style>

<style lang="less" scoped>
/deep/.el-input__inner{
  background-color: #101A2A;
  border-color: #24C2FF;
  border-radius: 0;
  color: #fff;
}

/deep/.el-input__inner::placeholder {
  color: #24C2FF;
  
}
     /* 谷歌 */
/deep/.el-input__inner::-webkit-input-placeholder {
  color: #24C2FF;
  
}
     /* 火狐 */
/deep/.el-input__inner:-moz-placeholder {
  color: #24C2FF;
  
}
  /*ie*/
/deep/.el-input__inner:-ms-input-placeholder {
 color: #24C2FF;
  
}

.el-button{
  border-radius: 0;
  padding: 12px  30px;
}
.el-button--primary {
    color: #FFF;
    background-color: #24C2FF;
    border-color: #24C2FF;
}

/deep/.el-button--text{
  color: #24C2FF;
}

/deep/.el-range-input{
 background-color: #101A2A;
 color: #fff;
}

/deep/.el-range-input::placeholder{
  color: #24C2FF;
}

/deep/.el-range-separator{
  color: #24C2FF;
  
}
</style>